<template>
	<div id="product">
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
		  <el-form-item label="请输入名称">
		    <el-input v-model="formInline.productName" placeholder="商品名称"></el-input>
		  </el-form-item>
		  <el-form-item label="全部">
		    <el-select v-model="formInline.productStatus" placeholder="上下架">
		      <el-option label="上架" value="01"></el-option>
		      <el-option label="下架" value="02"></el-option>
			 
		    </el-select>
		  </el-form-item>
		<!--  <el-form-item label="一级分类">
		    <el-select v-model="formInline.level" placeholder="请选择类型">
		      <el-option label="" value=""></el-option>
		      <el-option label="" value=""></el-option>
		  		<el-option label="" value=""></el-option>
		    </el-select>
		  </el-form-item>
		  <el-form-item label="二级分类">
		    <el-select v-model="formInline.level" placeholder="请选择类型">
		      <el-option label="" value=""></el-option>
		      <el-option label="" value=""></el-option>
		  		<el-option label="" value=""></el-option>
		    </el-select>
		  </el-form-item> -->
		  <el-form-item>
		    <el-button type="primary" @click="onSubmit">查询</el-button>
		  </el-form-item>
		</el-form>
		<template>
			 <el-button type="primary" @click="addProductBtn">新增商品</el-button>
		 <el-table
		   :data="product"
		   stripe
		   style="width: 100%">
		   <el-table-column
		     prop="id"
		     label="编号"
		     width="180">
		   </el-table-column>
		 			<el-table-column
		 			  prop="imgUrl"
		 			  label="图片"
		 			  width="180">
					  <template slot-scope="scope">
						  <el-avatar shape="square"   :src="scope.row.imgUrl" @error="errorHandler"></el-avatar>
						</template>
					  
		 			</el-table-column>
		   <el-table-column
		     prop="productName"
		     label="商品名称"
		     width="180">
		   </el-table-column>
		 			<el-table-column
		 			  prop="type"
		 			  label="商品类型">
		 			  <template slot-scope="scope">
		 			    <span v-if="scope.row.type=='1'" style="color: #F56C6C">生活用品</span>
		 			    <span v-else-if="scope.row.type=='2'" style="color: #F56C6C">果蔬</span>
		 			    <span v-else-if="scope.row.type=='3'" style="color: #67C23A">食品饮料</span>
						<span v-if="scope.row.type=='4'" style="color: #F56C6C">香烟</span>
						<span v-else-if="scope.row.type=='5'" style="color: #F56C6C">雪糕</span>
						<span v-else-if="scope.row.type=='6'" style="color: #67C23A">槟榔</span>
						<span v-if="scope.row.type=='7'" style="color: #F56C6C">杯子</span>
						<span v-else-if="scope.row.type=='8'" style="color: #F56C6C">服饰</span>
						<span v-else-if="scope.row.type=='12'" style="color: #67C23A">饮品</span>
						<span v-else-if="scope.row.type=='13'" style="color: #67C23A">纸巾</span>
						<span v-else-if="scope.row.type=='14'" style="color: #67C23A">衣服裤子</span>
		 			  </template>
		 			</el-table-column>
		 			<el-table-column
		 			  prop="productPrice"
		 			  label="价格"
		 			  width="180">
		 			</el-table-column>
		 			<el-table-column
		 			  prop="stock"
		 			  label="上架库存"
		 			  width="180">
		 			</el-table-column>
		 			<el-table-column
		 			  prop="productStatus"
		 			  label="(上架/下架)"
		 			  width="180"
					  >
					  <template slot-scope="scope">
						 <el-switch
						     v-model="scope.row.productStatus"
						     active-color="#13ce66"
						     inactive-color="#ff4949"
						     active-value="01"
						     inactive-value="02"
							 @change="status(scope.row)">
						   </el-switch>
					<!--    <span v-if="scope.row.productStatus=='01'" style="color: #F56C6C">上架</span>
					    <span v-else-if="scope.row.productStatus=='02'" style="color: #F56C6C">下架</span> -->
					  </template>
		 			</el-table-column>
			<el-table-column
			    prop="22"
			    label="操作"
			    width="160">
			  <template slot-scope="scope">
				  <el-button
				    size="mini"
				    @click="addKuCun(scope.row.id)">修改</el-button>
			          <el-button
			            size="mini"
			            type="danger"
			            @click="delProduct(scope.row.id)">删除</el-button>
			        </template>
			</el-table-column>
		  </el-table>
		  
		  <!--分页插件-->
		  <div id="cell" class="page">
		    <el-pagination
		       @size-change="handleSizeChange"
		       @current-change="handleCurrentChange"
		       :current-page="currentPage"
		       :page-sizes="[5, 6, 10, 20]"
		       :page-size="pageSize"
		       layout="total, sizes, prev, pager, next, jumper"
		       :total="total">
		    </el-pagination>
		  </div>
		<el-dialog title="添加商品" :visible.sync="dialogFormVisible2">
		  <el-form :model="addProduct">
		    <el-form-item label="商品名称" :label-width="formLabelWidth">
		      <el-input  v-model="addProduct.productName" autocomplete="off"></el-input>
		    </el-form-item>
		    <el-form-item label="商品描述" :label-width="formLabelWidth">
		      <el-input    v-model="addProduct.productDetail" autocomplete="off"></el-input>
		    </el-form-item>
					 <el-form-item label="商品价格" :label-width="formLabelWidth">
					   <el-input    v-model="addProduct.productPrice" autocomplete="off"></el-input>
					 </el-form-item >
						 <el-form-item label="商品类型" :label-width="formLabelWidth">
						 
					   <el-select  v-model="addProduct.type" placeholder="请选择">
					     <el-option
					       v-for="item in options"
					       :key="item.id"
					       :label="item.productTypeName"
					       :value="item.id">
					     </el-option>
					   </el-select>
					   </el-form-item>
					 <el-form-item label="商品图片" :label-width="formLabelWidth">
						<el-upload
						  class="avatar-uploader"
						  action="http://localhost:8989/buy/product/myupload"
						  :show-file-list="false"
						  :on-success="handleAvatarSuccess"
						  :before-upload="beforeAvatarUpload">
						  <img v-if="imageUrl" :src="imageUrl" class="avatar">
						  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					 </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
		    <el-button type="primary" @click="addProduct2('addProduct')">确 定</el-button>
		  </div>
		</el-dialog>
		  
		 <el-dialog title="添加库存" :visible.sync="dialogFormVisible">
		   <el-form :model="formAdd">
		     <el-form-item label="商品名称" :label-width="formLabelWidth">
		       <el-input readonly="" v-model="formAdd.productName" autocomplete="off"></el-input>
		     </el-form-item>
			 <el-form-item label="商品编号" :label-width="formLabelWidth">
			   <el-input readonly="" v-model="formAdd.productId" autocomplete="off"></el-input>
			 </el-form-item>
		     <el-form-item label="商品描述" :label-width="formLabelWidth">
		       <el-input    v-model="formAdd.productDetail" autocomplete="off"></el-input>
		     </el-form-item>
			 <el-form-item label="商品价格" :label-width="formLabelWidth">
			   <el-input    v-model="formAdd.productPrice" autocomplete="off"></el-input>
			 </el-form-item>
			 <el-form-item label="上架库存" :label-width="formLabelWidth">
			   <el-input  v-model="formAdd.stock" autocomplete="off"></el-input>
			 </el-form-item>
			 <el-form-item label="库存量" :label-width="formLabelWidth">
			   <el-input v-model="formAdd.productInventory" autocomplete="off"></el-input>
			 </el-form-item>
			 <el-form-item label="图片" :label-width="formLabelWidth">
			  	<el-avatar shape="square"   :src="formAdd.imgUrl" @error="errorHandler"></el-avatar>
			 </el-form-item>
		   </el-form>
		   <div slot="footer" class="dialog-footer">
		     <el-button @click="dialogFormVisible = false">取 消</el-button>
		     <el-button type="primary" @click="addKuCun2()">确 定</el-button>
		   </div>
		 </el-dialog>
		 
		</template>
		
	</div>
</template>

<script>
	export default{
		data() {
			return{
				imageUrl:'',
				  options: [],
				  //添加 下拉框的值
				   selectvalue: '',
				
				dialogFormVisible2:false,
				addProduct:{
						productName:'',
						type:'',
						productDetail:'',
						productPrice:'',
						imgUrl:''
				},
				formAdd:{
					productName:'',
					productDetail:'',
					productPrice:'',
					stock:'',
					productInventory:'',
					imgUrl:'',
				},
				   dialogFormVisible: false,
				   form: {
				        name: '',
				        region: '',
				        date1: '',
				        date2: '',
				        delivery: false,
				        type: [],
				        resource: '',
				        desc: ''
				      },
				 formLabelWidth: '80px',
				 table: false,
				      dialog: false,
				      loading: false,
				//查询条件
				formInline: {
				          productName: '',
				          productStatus: ''
				        },
				//每页行数
				pageSize: 5,
				//总页数
				total: 0,
				// 当前页
				currentPage: 1,
				//商品数据
				product:[]
			}
		},
		methods:{
			
			  handleAvatarSuccess(res, file) {
				  console.log(res)
				  console.log(file)
			        this.imageUrl =res;
					this.addProduct.imgUrl=this.imageUrl;
					console.log(123,this.addProduct)
			      },
			      beforeAvatarUpload(file) {
			        const isJPG = file.type === 'image/jpeg';
			        const isLt2M = file.size / 1024 / 1024 < 2;
			
			        if (!isJPG) {
			          this.$message.error('上传头像图片只能是 JPG 格式!');
			        }
			        if (!isLt2M) {
			          this.$message.error('上传头像图片大小不能超过 2MB!');
			        }
			        return isJPG && isLt2M;
			      },
			async option(){
				const {data: res} =  await this.$http.post('/productType/getProType')
				// for(let i =0;i<res.size;i++){
					this.options=res
				// }
			
			},
			async addProductBtn(){
				this.dialogFormVisible2= true
			},
			//添加商品
			async addProduct2(){
				console.log(this.addProduct)
				const {data: res} = await this.$http.post(`/product/addProduct2`,this.addProduct)
				if(res==true){
					this.selectAll()
					this.$message({
					  message: '添加成功！',
					  type: 'success'
					})
					this.dialogFormVisible2 = false
					 this.selectAll()
					
				}else{
						this.$message({
						  message: '添加失败！',
						  type: 'success'
						})
					}	
			},
			async addKuCun2(){
					
						const {data: res} = await this.$http.post(`/product/addKuCun2`,this.formAdd)
						if(res==true){
							this.selectAll()
							this.$message({
							  message: '添加成功！',
							  type: 'success'
							})
							 this.selectAll()
							this.dialogFormVisible = false
						}else{
								this.$message({
								  message: '添加失败！',
								  type: 'success'
								})
							}		
			},
			  errorHandler() {
			        return true
			      },
			async addKuCun(id){
				this.dialogFormVisible = true
				console.log(id)
				  const {data: res} = await this.$http.post(`/product/addKuCun/${id}`)
				  this.formAdd=res
			},
			 cancelForm() {
			      this.loading = false;
			      this.dialog = false;
			      clearTimeout(this.timer);
			    },
			 handleClose(done) {
			      if (this.loading) {
			        return;
			      }
			      this.$confirm('确定要提交表单吗？')
			        .then(_ => {
			          this.loading = true;
			          this.timer = setTimeout(() => {
			            done();
			            // 动画关闭需要一定的时间
			            setTimeout(() => {
			              this.loading = false;
			            }, 400);
			          }, 2000);
			        })
			        .catch(_ => {});
			    },
			//修改商品类型
			async upOne(id){
				this.dialog = true
				// const {data: res} = await this.$http.post
				// (`/productType/queryAll/${this.currentPage}/${this.pageSize}`, this.formInline)
				// this.productType = res.list
				// this.total = res.total
			},
			//删除商品
			async delProduct(id){
				const {data: res} = await this.$http.post
				(`/product/delProduct/${id}`, )
				if(res==true){
					this.$message({
					  message: '删除成功！',
					  type: 'success'
					})
					 this.selectAll()
				}else{
						this.$message({
						  message: '删除失败！',
						  type: 'success'
						})
					}
			},
			handleSizeChange(val) {
				console.log(val)
			  this.pageSize = val
			  this.selectAll()
			},
			handleCurrentChange(val) {
				console.log(val)
			  this.currentPage = val
			  this.selectAll()
			},
			async onSubmit() {
			       const {data: res} = await this.$http.post
			       (`/product/selectAll/${this.currentPage}/${this.pageSize}`, this.formInline)
			       this.product = res.list
			       this.total = res.total
			      },
			//查询所有商品
			    async selectAll() {
			     const {data: res} = await this.$http.post
			     (`/product/selectAll/${this.currentPage}/${this.pageSize}`, this.formInline)
			     this.product = res.list
			     this.total = res.total
			     console.log(res)
				 
			    },
				//商品上下架
				async status(product){
					console.log(product)
					const {data: res} = await this.$http.post
					(`/product/status`, product)
					
					if(res==true){
						this.$message({
						  message: '操作成功！',
						  type: 'success'
						})
					}else{
							this.$message({
							  message: '操作失败！',
							  type: 'success'
							})
						}
				}
				  
		},
		created(){
			this.selectAll(),
			this.option()
		}
	}
	
</script>

<style scoped>
	  .avatar-uploader .el-upload {
	     border: 1px dashed #d9d9d9;
	     border-radius: 6px;
	     cursor: pointer;
	     position: relative;
	     overflow: hidden;
	   }
	   .avatar-uploader .el-upload:hover {
	     border-color: #409EFF;
	   }
	   .avatar-uploader-icon {
	     font-size: 28px;
	     color: #8c939d;
	     width: 178px;
	     height: 178px;
	     line-height: 178px;
	     text-align: center;
	   }
	   .avatar {
	     width: 178px;
	     height: 178px;
	     display: block;
	   }
	.upbtn{
		display: inline;
		position: relative;
		top: -1px;
		left: 10px;
	}
	.delbtn{
		display: inline;
		top: 10px;
		left: 0px;
	}
	.add{
		display: inline;
		width: 50px;
		border: 1px solid black;
		margin: 5px;
		background-color: #fff5ee;
		a{
		text-decoration: none;
		margin: 5px;
		}
	}
	.del{
		display: inline;
		width: 50px;
		border: 1px solid black;
		margin: 5px;
		background-color: #ff4500;
		text-decoration: none;
		a{
		text-decoration: none;
		margin: 5px;
		}
	}
</style>